<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script src="js/vue.js"></script>
		<script src="js/index.js"></script>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue-resource.min.js"></script>
		<!-- 引入 css -->
		
		<!-- 引入 js -->
		<script src="js/jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/shortcut.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/http.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.el-tree {
				display: inline-block;
			}
			.el-dialog{
				/*height: 80vh;*/
			}
			.el-message-box{width:80%;height:800px}
			.el-message-box textarea{height:640px}
		</style>
		
		<div id="app">
			<div id="toolbar-container"></div>
			<div id="editor-container"></div>
			<el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
				<div v-html="showDeatileObj.label"></div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
			</el-dialog>
			<el-button @click="()=>xmind()">导出所有XMIND</el-button>
			<el-button @click="()=>selectAll()">查询所有</el-button>
			<el-button @click="collapseAll2(data)">全部折叠</el-button>
			<el-button @click="unFoldAll2(data)">全部展开</el-button>
			<el-button @click="expandClose(data)">展开或折叠</el-button>
			<p></p>
			<el-input style="width:300px" placeholder="输入关键字进行过滤" v-model="filterText">
			</el-input>
			<p>ALT+R展开第一个搜索项,ALT+C点击"确 定"，ALT+S点击“确定”，ALT+Q刷新</p>
			<el-tree class="filter-tree" :data="data" node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" :filter-node-method="filterNode" ref="tree" :expand-on-click-node="false">
				<span class="custom-tree-node" slot-scope="{ node, data }">
		        <span style="max-width:300px;display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ node.label }}</span>
				<span style="display:inline-block;overflow: auto;">
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => append(data)">
		 			添加子级
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => appendSelf(data,node)">
		 			添加同级
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => remove(node, data)">
		                                   删除
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => update(node, data)">
		                                    修改
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => xmindNode(node, data)">
		                                    导出此节点
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="() => selectNode(node, data)">
		                                    展开此节点
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="showDeatile(node, data)">
		                                   显示详情
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="appendBefore(node, data)">
		                                   原始添加子级
		          </el-button>
		          <el-button
		            type="text"
		            size="mini"
		            @click="updateBefore(node, data)">
		                                   原始修改
		          </el-button>
		        </span>
				</span>
			</el-tree>
		</div>
		<script type="text/javascript">
			
			var isExpand = false;
			var Main = {
				data() {
					return {
						filterText: '',
						dialogVisible: false,
						showDeatileObj: {},
						data: [],
						defaultProps: {
							children: 'children',
							label: 'label',
							id: 'id'
						}
					};
				},
				watch: {
					filterText(val) {
						this.$refs.tree.filter(val);
					}
				},
				methods: {
					showDeatile(node, data) {
						this.showDeatileObj  = {}
						this.dialogVisible = true
						this.showDeatileObj = data
						console.log(node, data)
					},
					handleDragStart(node, ev) {
						//console.log('drag start', node);
					},
					handleDragEnter(draggingNode, dropNode, ev) {
						//console.log('tree drag enter: ', dropNode.label);
					},
					handleDragLeave(draggingNode, dropNode, ev) {
						//console.log('tree drag leave: ', dropNode.label);
					},
					handleDragOver(draggingNode, dropNode, ev) {
						//console.log('tree drag over: ', dropNode.label);
					},
					handleDragEnd(draggingNode, dropNode, dropType, ev) {
						//console.log('tree drag end: ', dropNode.label);
						//debugger;

						//console.log('tree drag end: ', dropNode && dropNode.label, dropType);

					},
					handleClose(done) {
						this.$confirm('确认关闭？')
							.then(_ => {
								done();
							})
							.catch(_ => {});
					},
					handleDrop(draggingNode, dropNode, dropType, ev) {
						//console.log('tree drop: ', dropNode.label, dropType);
						let pid = '';
						if(dropType == 'inner') {
							//console.log("pid:"+dropNode.id);
							pid = dropNode.data.id;
						}
						if(dropType == 'before') {
							//console.log("pid:"+dropNode.parent.id);
							pid = dropNode.parent.data.id;
						}
						if(draggingNode.id != dropNode.id) {
							this.$http.get(remoteIp+'/back/updatePid?id=' + draggingNode.data.id + '&pid=' + pid).then(function(res) {
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
							}, function() {
								console.log('请求失败处理');
							});
						}
					},
					allowDrop(draggingNode, dropNode, type) {
						if(dropNode.data.label === '二级 3-1') {
							return type !== 'inner';
						} else {
							return true;
						}
					},
					allowDrag(draggingNode) {
						return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
					},
					append(data) {
						/*
						this.$prompt('请输入内容', '请输入内容', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputType: 'textarea'
						}).then(({
							value
						}) => {
							const newChild = {
								label: value,
								children: []
							};
							if(!data.children) {
								this.$set(data, 'children', []);
							}
							data.children.push(newChild);
							this.$http.get(remoteIp+'/back/insert?label=' + value.trim() + '&pid=' + data.id).then(function(res) {
								this.$message({
									type: 'success',
									message: '添加成功!'
								});
							}, function() {
								console.log('请求失败处理');
							});

						}).catch((msg) => {
							this.$message({
								type: 'error',
								message: msg
							});
						});
						*/
						localStorage.setItem("value","");
						localStorage.setItem("pid",data.id);
						//location.href = "add.html";
						window.open("add.html","new");
					},
					appendBefore(node,data) {
						
						this.$prompt('请输入内容', '请输入内容', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputType: 'textarea'
						}).then(({
							value
						}) => {
							const newChild = {
								label: value,
								children: []
							};
							if(!data.children) {
								this.$set(data, 'children', []);
							}
							data.children.push(newChild);
							this.$http.post(remoteIp+'/back/insert',{label:value.trim(),pid:data.id}).then(function(res) {
								this.$message({
									type: 'success',
									message: '添加成功!'
								});
								this.refresNode();
							}, function() {
								console.log('请求失败处理');
							});

						}).catch((msg) => {
							this.$message({
								type: 'error',
								message: msg
							});
						});
						
					},
					appendSelf(data, node) {
						/*
						this.$prompt('请输入内容', '请输入内容', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputType: 'textarea'
						}).then(({
							value
						}) => {
							const newChild = {
								label: value,
								children: []
							};
							if(!data.children) {
								this.$set(data, 'children', []);
							}
							node.parent.data.children.push(newChild);
							this.$http.get(remoteIp+'/back/insert?label=' + value.trim() + '&pid=' + data.pid).then(function(res) {
								this.$message({
									type: 'success',
									message: '添加成功!'
								});
							}, function() {
								console.log('请求失败处理');
							});

						}).catch((msg) => {
							this.$message({
								type: 'error',
								message: msg
							});
						});
						*/
						localStorage.setItem("value","");
						localStorage.setItem("pid",data.pid);
						//location.href = "add.html";
						window.open("add.html","new");
					},
					remove(node, data) {

						const parent = node.parent;
						const children = parent.data.children || parent.data;
						const index = children.findIndex(d => d.id === data.id);
						children.splice(index, 1);
						this.$http.get(remoteIp+'/back/delete?id=' + data.id).then(function(res) {
							//this.data = res.body;
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}, function() {
							console.log('请求失败处理');
						});
					},
					updateBefore(node, data) {
						this.$prompt('请输入内容', '请输入内容', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputType: 'textarea',
							width:'80%',
							inputValue: data.label
						}).then(({
							value
						}) => {
							data.label = value;
							//this.$http.post(remoteIp+'/back/updateBefore?label=' + value.trim() + '&id=' + data.id).then(function(res) {
							this.$http.post(remoteIp+'/back/updateBefore',{label:value.trim(),id:data.id}).then(function(res) {
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
							}, function() {
								console.log('请求失败处理');
							});

						}).catch(() => {
							this.$message({
								type: 'info',
								message: '取消输入'
							});
						});
						
					},
					update(node, data) {
						/*
						this.$prompt('请输入内容', '请输入内容', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputType: 'textarea',
							inputValue: data.label
						}).then(({
							value
						}) => {
							data.label = value;
							this.$http.get(remoteIp+'/back/update?label=' + value.trim() + '&id=' + data.id).then(function(res) {
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
							}, function() {
								console.log('请求失败处理');
							});

						}).catch(() => {
							this.$message({
								type: 'info',
								message: '取消输入'
							});
						});
						*/
						localStorage.setItem("value",data.label);
						localStorage.setItem("id",data.id);
						//location.href = "editor.html";
						window.open("editor.html","new");
					},
					xmind() {
						this.$http.get(remoteIp+'/back/xmind').then(function(res) {
							this.$message({
								type: 'success',
								message: '生成xmind成功!'
							});
						}, function() {
							console.log('请求失败处理');
						});
					},
					xmindNode(node, data) {
						this.$http.get(remoteIp+'/back/xmind?searchId=' + data.id).then(function(res) {
							this.$message({
								type: 'success',
								message: '生成xmind成功!'
							});
						}, function() {
							console.log('请求失败处理');
						});

					},
					selectNode(node, data) {
						localStorage.setItem("nodeId",data.id);
						this.filterText = '';
						this.$http.get(remoteIp+'/back/select?searchId=' + data.id).then(function(res) {
							this.data = res.body
						}, function() {
							console.log('请求失败处理');
						});

					},
					refresNode(){
						nodeId = localStorage.getItem("nodeId");
						if(!nodeId){
							nodeId = 0;
						}
						this.$http.get(remoteIp+'/back/select?searchId=' + nodeId).then(function(res) {
							this.data = res.body
						}, function() {
							console.log('请求失败处理');
						});
					},
					selectAll() {
						this.$http.get(remoteIp+'/back/select').then(function(res) {
							this.data = res.body;
						}, function() {
							console.log('请求失败处理');
						});
					},
					filterNode(value, data) {
						if(!value) return true;
						return data.label.indexOf(value) !== -1;
					},
					// 全部展开
					unFoldAll2(data) {
						let self = this;
						data.forEach((el) => {
							self.$refs.tree.store.nodesMap[el.id].expanded = true;
							el.children && el.children.length > 0 ?
								self.unFoldAll2(el.children) :
								""; // 子级递归
						});
					},
					// 全部折叠
					collapseAll2(data) {
						let self = this;
						data.forEach((el) => {
							self.$refs.tree.store.nodesMap[el.id].expanded = false;
							el.children && el.children.length > 0 ?
								self.collapseAll2(el.children) :
								""; // 子级递归
						});
					},
					expandClose(arr) {
						let self = this;
						arr.forEach((el) => {
							beforeExpand = self.$refs.tree.store.nodesMap[el.id].expanded
							self.$refs.tree.store.nodesMap[el.id].expanded = !beforeExpand;
							if(el.children) {
								self.expandClose(el.children);
							}
						});

					}
				},
				mounted() {
					//发送get请求
					this.$http.get(remoteIp+'/back/select').then(function(res) {
						//console.log(res.body);
						this.data = res.body;
						localStorage.clear();
					}, function() {
						console.log('请求失败处理');
					});
				}
			}
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
			
			shortcut.add("Alt+s",function() {
				$("button span:contains(确定)").click();
			});
			shortcut.add("Alt+c",function() {
				$("button span:contains(确 定)").click();
			});
			shortcut.add("Alt+r",function() {
				$("button span:contains(确 定)").click();
				val = $("input").val();
				//$("(.custom-tree-node span:contains("+val+").next() button span:contains(展开此节点))").click();
				//console.log("(.custom-tree-node span:contains("+val+")"+").next() button span:contains(展开此节点)");
				//$(".custom-tree-node span:contains("+val+")").parent().find("span button span:contains(展开)").parent().css("{border:1px solid red}");
				
				$(".custom-tree-node span:contains("+val+")").parent().find("span button span:contains(展开)").parent().eq(0).click()
			});
			shortcut.add("Alt+q",function() {
				$("button span:contains(展开此节点):first").parent().click();
			});
			
		</script>
	</body>

</html>